import React from "react"
import {withRouter} from "react-router-dom"

function Register(props) {
  let [registerMessage, setRegisterMessage] = React.useState(false)
  let elements = {}

  const register = (e) => {
    e.preventDefault()
    fetch(props.registerUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: analyzeFormData(),
    })
      .then((res) => res.text())
      .then((json) => JSON.parse(json))
      .then((res) => {
        setRegisterMessage(res.message)
        props.history.push("/login")
        // res.success ? props.showLogin() : void 0
      })
  }

  const analyzeFormData = () => {
    let isStudent = elements.student.checked
    let username = elements.username.value
    let password = elements.password.value
    let phonenumber = elements.phonenumber.value
    let isMale = elements.male.checked
    let isFemale = elements.female.checked
    let isSecret = elements.secret.checked
    let gender
    if (isMale) gender = "male"
    if (isFemale) gender = "female"
    if (isSecret) gender = "secret"
    let obj = {
      identity: isStudent ? "student" : "teacher",
      username,
      password,
      phonenumber,
      gender,
    }
    console.log(obj)
    return JSON.stringify(obj)
  }

  return (
    <>
      <div>
        <h5>register.jsx</h5>
        <form action={props.registerUrl} method="post">
          <input
            type="radio"
            id="student"
            name="identity"
            value="student"
            ref={(e) => (elements.student = e)}
          />
          <label htmlFor="student">注册学生账户</label>
          <input
            type="radio"
            id="teacher"
            name="identity"
            value="teacher"
            ref={(e) => (elements.teacher = e)}
          />
          <label htmlFor="teacher">注册教师账户</label>
          <br />
          性别：
          <br />
          <label htmlFor="male">男</label>
          <input
            type="radio"
            id="male"
            name="gender"
            value="male"
            ref={(e) => (elements.male = e)}
          />
          <label htmlFor="female">女</label>
          <input
            type="radio"
            id="female"
            name="gender"
            value="female"
            ref={(e) => (elements.female = e)}
          />
          <label htmlFor="secret">秘密</label>
          <input
            type="radio"
            id="secret"
            name="gender"
            value="secret"
            ref={(e) => (elements.secret = e)}
          />
          <br />
          <label htmlFor="username">用户名：</label>
          <input
            type="text"
            id="username"
            name="username"
            autoComplete="off"
            ref={(e) => (elements.username = e)}
          />
          <br />
          <label htmlFor="password">密码：</label>
          <input
            type="password"
            id="password"
            name="password"
            autoComplete="off"
            ref={(e) => (elements.password = e)}
          />
          <br />
          <label htmlFor="phonenumber">手机号：</label>
          <input
            type="number"
            id="phonenumber"
            name="phonenumber"
            autoComplete="off"
            ref={(e) => (elements.phonenumber = e)}
          />
          <br />
          <input type="submit" value="现在注册" onClick={register} />
        </form>
      </div>
      {registerMessage && <p>{registerMessage}</p>}
    </>
  )
}


export default withRouter(Register)
